<template>
	<view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
		<view class="section section-2">
			<view class="table-container">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th style='width: 50px;' v-for="(value, key) in table">
							{{value.name}}
						</th>
					</tr>
					<tr v-for="(item,index) in listMap">
						<td>{{item.name}}</td>
						<td>{{(item.alarm_time).substring(0, 10)}}</td>
						<td>
							<image @click="previewImage(item.image_url)" :src="item.image_url" style="width: 80px;height: 80px;" mode="aspectFit"></image>
						</td>
					</tr>
				</table>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import { wornListApi } from '@/api/statistics.js'
	export default{
		onLoad(e) {
			this.project_id = e.project_id
			// this.wornListApi()
		},
		data(){
			return{
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				table:[{
					name: '报警规则',
				},{
					name: '报警日期',
				},{
					name: '报警日期',
				}],
				listMap:[]
			}
		},
		methods:{
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				});
			},
			// async wornListApi(){
			// 	let j = await wornListApi({
			// 		page: page.num,
			// 		pageSize: this.pageSize,
			// 		project_id: this.project_id
			// 	})
			// 	console.log('信息',j)
			// 	if(j.data.code == 1){
			// 		this.listMap = j.data.data
			// 	}
			// },
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				const {data} =  await wornListApi({
					project_id: this.project_id,
					page: page.num,
					pageSize: this.pageSize
				});
				
				if (data.code === 1 || data.code === 200) {
					const listMap = data.data.data;
					
					// 接口返回的当前页数据列表 (数组)
					let curPageData = listMap; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.data.list.last_page; 
					let totalPage = 1; 
					//设置列表数据
					if(page.num == 1) this.listMap = []; //如果是第一页需手动置空列表
					this.listMap = this.listMap.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
						// this.mescroll.endSuccess(1);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.section-2{
		width: 100%;
		.table-container{
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
			padding-top: 25rpx;
			overflow-x: auto;
			table{
				table-layout:fixed;
				border-top: 1rpx solid #ebebeb;
				border-left: 1rpx solid #ebebeb;
				th{
					font-size: 26rpx;
					color: #3b3c40;
					text-align: left;
					word-break: keep-all;
					white-space: nowrap;
					background-color: #e2eefe;
					padding: 30rpx 60rpx;
					text-align: center;
					border-bottom: 1rpx solid #ebebeb;
					border-right: 1rpx solid #ebebeb;
				}
				td{
					
					font-size: 22rpx;
					color: #compare;
					// white-space: pre-line;  //合并空白符序列，但是保留换行符
					// word-wrap: break-word; //在长单词或+URL+地址内部进行换行
					// word-break: break-all; //允许在单词内换行
					// word-break: keep-all;
					// white-space: nowrap;
					text-align: left;
					padding-right: 20rpx;
					padding: 20rpx;
					border-bottom: 1rpx solid #ebebeb;
					border-right: 1rpx solid #ebebeb;
					text-align: center;
				}
			}
		}
	}
</style>
